<template>
    <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart',
        },
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: String,
            default: '300px',
        },
        chartData: {
            type: Object,
            default: {},
        },
        materialName: {
            type: String,
            default: '',
        },
    },
    watch: {
        chartData(val) {
            this.$nextTick(() => {
                this.initChart(val)
            })
        },
    },
    data() {
        return {
            chart: null,
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart(val) {
            this.chart = echarts.init(this.$el, 'macarons')
            let chartData = { ...val }
            let _this = this
            let colors = ['#5470C6', '#EC808D', '#95F204']
            this.chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#fff',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'line', // 'shadow' as default; can also be 'line' or 'shadow'
                    },
                },
                color: colors,
                // toolbox: {
                //     show: true,
                //     // orient: 'vertical',
                //     // left: 'right',
                //     // top: 'center',
                //     feature: {
                //         mark: {
                //             show: true,
                //         },
                //         dataView: {
                //             show: true,
                //             readOnly: false,
                //         },
                //         magicType: {
                //             show: true,
                //             type: ['line', 'bar'],
                //         },
                //         restore: {
                //             show: true,
                //         },
                //         saveAsImage: {
                //             show: true,
                //         },
                //     },
                // },
                legend: {
                    //	    top: 'bottom'
                    textStyle: {
                        // color: '#FFFFFF'
                        color: '#fff',
                        fontSize: 14,
                    },
                },
                grid: {
                    background: '#fff',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: chartData.date,
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '单位：',
                        axisLine: {
                            onZero: false,
                            show: true,
                            lineStyle: {
                                // color: colors[0]
                            },
                        },
                        min: 0,
                        max: chartData.Ymax,
                        // interval: 50,
                        axisLabel: {
                            formatter: '{value} ',
                        },
                    },

                    {
                        type: 'value',
                        name: '单位：%',
                        min: 0,
                        max: 100,
                        interval: 20,
                        //纵坐标轴上的各个值对应的横线是否显示：默认显示
                        splitLine: false,
                        //splitArea : {show : true}, //保留网格区域
                        axisLabel: {
                            formatter: '{value} %',
                        },
                    },
                ],
                series: [
                    {
                        name: '合格',
                        type: 'bar',
                        stack: 'total',
                        barWidth: '15',
                        label: {
                            show: true,
                        },
                        emphasis: {
                            focus: 'series',
                        },
                        data: chartData.qualifiedList,
                    },
                    {
                        name: '不合格',
                        type: 'bar',
                        stack: 'total',
                        barWidth: '15',
                        label: {
                            show: true,
                        },
                        emphasis: {
                            focus: 'series',
                        },
                        data: chartData.unqualifiedList,
                    },
                    {
                        name: '合格率',
                        type: 'line',
                        itemStyle: { normal: { label: { show: true } } },
                        yAxisIndex: 1,
                        // label: labelOption,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%'
                            },
                        },
                        emphasis: {
                            focus: 'series',
                        },
                        //显示设置
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    //格式化
                                    formatter: function (data) {
                                        console.log(data.value)
                                        if (parseInt(data.value) > 0) {
                                            //值大于0才显示
                                            return data.value + '%'
                                        }
                                    },
                                },
                            },
                        },
                        data: chartData.ratioList,

                        markLine: {
                            label: {
                                position: 'middle',
                                formatter: '{b}: {c}',
                                show: true,
                            },
                            lineStyle: {
                                color: '#D9001B',
                            },
                            data: _this.materialName
                                ? [
                                      {
                                          name: `${_this.materialName}合格率`,
                                          yAxis: chartData.percentPass,
                                          label: {
                                              formatter: '{b}: {c}百万',
                                          },
                                      },
                                  ]
                                : [],
                        },
                    },
                ],
            })
        },
    },
}
</script>
